<template>
	<view>
		<u-sticky bgColor="#6492FF" offsetTop=0 customNavHeight=0>
			<navbox title="申请推广码" btn='申请记录' @rightH="navto('/pages/my/file?productId='+productId)"></navbox>
		</u-sticky>
		<view class="con">
			<view class="con__box">
				<view class="con__box__title">
					申请注意事项
				</view>
				<u-parse :content="applyNotice" selectable></u-parse>
			</view>
			<view class="con__box" v-for="(item,index) in list" :key="index">
				<view class="con__box__title">
					填写申请信息
				</view>
				<view class="u-flex u-flex-y-center u-flex-between bb1">
					<view class="con__box__text">
						姓名
					</view>
					<input type="text" class="con__box__value" v-model="item.name" placeholder="请输入姓名" />
				</view>
				<view class="u-flex u-flex-y-center u-flex-between bb1">
					<view class="con__box__text">
						手机号
					</view>
					<input @input="input(item.tel,index)" type="number" maxlength="11" class="con__box__value"
						v-model='item.tel' placeholder="请输入手机号" />
				</view>
				<view class="u-flex u-flex-y-center u-flex-between bb1" v-if="!applyAreaLimit">
					<view class="con__box__text">
						作业地区
					</view>
					<!-- <input type="number" class="con__box__value" v-model='item.tel' placeholder="请输入手机号" /> -->
					<view class="con__box__value" @click="addressShow = true,curitem=index">

						{{item.area?item.area:'请输入地区>'}}
					</view>
				</view>
				<view class="u-flex u-flex-y-center u-flex-between bb1" v-for="(item1,index1) in item.extend"
					:key="index1">
					<view class="con__box__text">
						{{item1.name}}
					</view>
					<input type="text" v-model="item1.val" class="con__box__value" :placeholder="'请输入'+item1.name" />
				</view>
				<view class="con__box__text" v-if="item.img.length>0">
					相关截图
				</view>
				<view class="u-flex u-flex-y-center" v-if="item.img.length>0">
					<view class="" v-for="(item1,index1) in item.img" :key="index1" @click="upimg(index,index1)">
						<view class="con__box__up" v-if="!item1">
							<image src="/static/img/home/up.png" class="con__box__up__bg" mode=""></image>
						</view>
						<image class="con__box__up" :src="item1" v-else mode="aspectFill"></image>

					</view>

				</view>
				<!-- 删除按钮 -->
				<view class="con__box__del" v-if="list.length>1" @click="del(index)">
					<u-button text="删除" size="mini" shape='circle' color="#6492FF" plain></u-button>
				</view>
			</view>


			<!-- 添加按钮 -->
			<view class="footer">
				<view class="con__btn" @click="add">
					再加一条
				</view>
			</view>

			<!-- 申请按钮 -->
			<view class="submit">
				<u-button text="立即申请" size="large" color="#6492FF" @click="submit"></u-button>
			</view>
		</view>
		<address-picker :show="addressShow" closeOnClickOverlay @confirm='confirmAddress' @cancel='addressShow=false'
			@close='addressShow = false' :address-data="addressData" :indexs="indexs" :areaId="areaId"
			:type="type"></address-picker>
	</view>
</template>

<script>
	import {
		product,
		apply,
		applyJudge
	} from '@/api/home.js'
	export default {
		data() {
			return {
				list: [{
					name: '',
					tel: '',
					img: [],
					extend: [],
					productId: '',
					area: '',
					product: ''
				}, ],
				applyNotice: '',
				promotionApplyExtend: '',
				extendlist: [],
				img: '',
				images: [],
				productId: '',
				applyAreaLimit: true,
				address: '',
				addressShow: false,
				indexs: [0, 0, 0],
				areaId: [1, 110000, 110101],
				addressData: ['北京市', '北京市', '东城区'],
				type: 3, //1-省，2-省市，3-省市区
				curitem: 0,
				isok: true,
				product: ''
			};
		},
		methods: {
			// 上传图片
			upimg(index, index1) {
				let _this = this
				// console..log
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						})
						uni.uploadFile({
							url: _this.$BASE_URL + '/app/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: uni.getStorageSync('ytbtoken')
							},
							success: (uploadFileRes) => {
								if (JSON.parse(uploadFileRes.data).code == 200) {
									uni.hideLoading()
									_this.list[index].img[index1] = JSON.parse(uploadFileRes.data)
										.data.url
									_this.$forceUpdate()
								} else {
									uni.reLaunch({
										url: '/pages/index/login'
									})
								}
							}
						});
					}
				});
			},
			confirmAddress(val) {
				// console.log(val);
				this.address = val.value.join('')
				this.addressShow = false
				this.list[this.curitem].area = this.address
			},
			add() {
				this.list.push({
					name: '',
					tel: '',
					img: this.images,
					extend: JSON.parse(JSON.stringify(this.extendlist)),
					productId: this.productId,
					area: '',
					product: this.product
				})
			},
			del(index) {
				this.list.splice(index, 1)
			},
			submit() {
				this.isok = true



				let form = new Array(this.list.length)
				let q = []
				this.list.map((t, i) => {
					t.images = t.img.join(',')
					form[i] = t

				})
				console.log(this.checkSame(form))

				for (let i = 0; i < form.length; i++) {
					let t = form[i]
					for (let j = 0; j < form[i].extend.length; j++) {
						if (!form[i].extend[j].val) {
							this.$u.toast(form[i].extend[j].name + '不能为空');
							this.isok = false
							break;
						}
					}
					if (!this.isok) {
						break
					}
					if (!form[i].name) {
						this.$u.toast('未填写姓名')
						this.isok = false
						break
					}
					if (form[i].tel.length < 11) {
						this.$u.toast('手机号有误')
						this.isok = false
						break
					}
					// 判断长度



					// if (form.length > 2) {
					// 	if (i > 0) {
					// 		if (form[i].tel == form[0].tel) {
					// 			this.$u.toast('第' + (i + 2) + '条信息的手机号与之前的手机号相同，请检查！')
					// 			this.isok = false
					// 			break
					// 		}
					// 	}
					// }

					if (!this.applyAreaLimit) {
						if (!form[i].area) {
							this.$u.toast('未填写作业地区')
							this.isok = false
							break
						}
					}
					// 判断是需要截图
					let num = 0
					form[i].img.map(t1 => {
						if (t1) {
							num++
						}
					})

					if (num < this.images.length) {
						this.$u.toast('必须上传' + this.images.length + '张截图!')
						this.isok = false
						break
					}

					this.isok = true
					q.push({
						"area": t.area,
						"extend": JSON.stringify(t.extend),
						"images": t.images,
						"name": t.name,
						"productId": this.productId,
						"tel": t.tel,
						product: this.product
					})

				}

				if (this.checkSame(form, 'tel')) {
					// 有重复
					this.$u.toast('第' + (this.checkSame(form) + 1) + '条信息的手机号与之前的手机号相同，请检查！')
					return
				}

				if (this.isok) {
					// console.log(q)
					// 提交
					apply(q).then(res => {
						// console.log(res)
						if (res.data.code == 200) {
							this.$u.toast('申请成功')
							uni.navigateBack()
						}
					})
				}

			},

			input(item, index) {
				if (item.length == 11) {
					// 校验推广码
					applyJudge({
						customerId: uni.getStorageSync('ytbuser').id,
						productId: this.productId,
						tel: item
					}).then(res => {
						if (res.data.code == 200) {

						} else {
							this.list[index].tel = ''
							this.$u.toast(res.data.msg)
						}
					})
				}
			}
		},
		onLoad(option) {
			this.productId = option.id
			product(option.id).then(res => {
				// console.log(res.data.data.applyNotice)
				if (res.data.code == 200) {
					this.promotionApplyExtend = res.data.data.promotionApplyExtend
					this.applyNotice = res.data.data.applyNotice
					this.product = res.data.data.name
					this.promotionApplyExtend.split(',').map(t => {
						this.extendlist.push({
							name: t,
							val: ''
						})
					})
					this.extendlist.map((t, i) => {
						if (!t.name) {
							this.extendlist.splice(i, 1)
						}
					})
					this.list[0].extend = JSON.parse(JSON.stringify(this.extendlist))
					let img = ''
					if (!res.data.data.applySampleImg) {
						img = ''
					} else {
						img = res.data.data.applySampleImg
					}
					this.images = new Array(img.split(',').length - 1)

					this.list[0].img = JSON.parse(JSON.stringify(this.images))
					this.list[0].productId = this.productId
					this.applyAreaLimit = res.data.data.applyAreaLimit

				}
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.con {
		padding: 25rpx 16rpx 200rpx;

		&__box {
			margin-bottom: 25rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			padding: 0 40rpx 20rpx;
			position: relative;

			&__title {
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 33rpx;
				color: #3E3D3D;
				line-height: 33rpx;
				padding: 30rpx 0 20rpx;
			}

			&__text {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #3E3D3D;
				line-height: 72rpx;
				margin-right: 40rpx;
			}

			&__value {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #707070;
				line-height: 72rpx;
				text-align: right;
				flex: 1;
			}

			&__up {
				width: 115rpx;
				height: 115rpx;
				background: #F6F6F6;
				border: 1px dashed rgba(112, 112, 112, .5);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				&__bg {
					width: 25rpx;
					height: 25rpx;

				}
			}

			&__del {
				position: absolute;
				top: 30rpx;
				right: 46rpx;
			}
		}

		&__btn {
			width: 515rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			border: 1px solid rgba(100, 146, 255, .5);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 25rpx;
			color: #6492FF;
		}

		.footer {
			display: flex;
			justify-content: center;
		}

	}

	.bb1 {
		border-bottom: 1rpx solid rgba(205, 205, 205, .5);
	}

	.submit {
		position: fixed;
		width: 750rpx;
		bottom: 0;
		left: 0;
	}
</style>